<template>
  <div class="home-container">
    <div class="search-group">
      <img class="search-logo" src="../../assets/img/logo.png" alt="">
      <van-search v-model="keyword" show-action shape="round" background="#000" placeholder="搜索研讨会">
        <template #action>
          <div @click="onSearch" class="search-button"><van-icon name="search" color="#888" size=".36rem" /></div>
        </template>
      </van-search>
    </div>
    <div class="swipe-group">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in banner" :key="index">
          <img class="swipe-img" :src="baseUrl+image.thumb" @click="bannerGoto(image)" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="nav-group">
      <van-grid :column-num="3" :border="false">
        <van-grid-item v-for="(item, index) in topNav" :key="index" @click="item.linkidnew &&　$router.push({path:item.linkidnew})">
          <van-image width="0.6rem" height="0.6rem" fit="cover" class="nav-img-icon" :src="baseUrl+item.thumb" />
          <div class="nav-img-text">{{item.bannername}}</div>
        </van-grid-item>
      </van-grid>
    </div>
    <page-title :url="zixun_icon" title="课程更新" :show-more="false" :border="true" top="0.12rem" />
    <div class="class-upload-group">
      <!-- is-link -->
      <van-cell @click="goToDetailkcgx(item,'KCGX')" v-for="(item, index) in curriculumUpdate" :key="index">
        <template #icon>
          <img style="width: 0.4rem;height: 0.4rem;" :src="icons" />
        </template>
        <template>
          <div class="class-upload-title ellipsis-multiline1">{{item.name}}</div>
        </template>
      </van-cell>
    </div>
    <page-title :url="newsIcon" title="最新专栏" :show-more="false"  top="0.12rem" />
    <div class="list-group" ref="scrollbars">
      <div class="match-content" v-for="(item, index) in newCourse" :key="index" @click="goToDetail(item)">
        <div class="content-img-group-mobile">
          <div style="position: relative;" class="content-img-group">
            <img :src="baseUrl+item.thumb" class="content-img">
          </div>
        </div>
        <div class="detail-mobile">
          <div class="detail-title ellipsis-multiline">{{item.name}}</div>
          <div class="detail-info">
            <van-image width="0.5rem" height="0.5rem" round fit="cover" class="nav-img-icon" :src="baseUrl+item.teacherthumb" />
          </div>
          <div class="detail-infos">
            <span class="detail-info-price"><em>¥{{item.cose}}元起></em></span>
            <!-- <span class="detail-info-text">查看详情</span> -->
          </div>
        </div>
      </div>
    </div>
    <div v-for="(item, index) in list" :key="index">
      <page-title :url="authurIcon" :title="item.sname" show-more :line-url="`/curriculum?sid=${item.sid}&name=${item.sname}`"  top="0.12rem" />
      <div class="list-grid-group">
        <div class="match-grid-content" v-for="(val, key) in item.tcourse" :key="index+'-'+key" @click="goToDetail(val)">
          <div class="match-grid-box">
            <div class="content-grid-img-group">
              <img :src="baseUrl+val.thumb" class="content-grid-img">
            </div>
            <div class="detail-grid-mobile">
              <div class="detail-grid-title ellipsis-multiline1">{{val.name}}</div>
              <div class="detail-grid-infos">
                <span class="detail-info-grid-price"><em>¥{{val.cose}}元起 ></em></span>
                <!-- <span class="detail-info-grid-text">查看详情</span> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footers/>
    <wechat pageurl="/weChatApp/home" />
  </div>
</template>
<script>
import { Icon, Toast, NavBar, Tabbar, Search, Swipe, SwipeItem, Grid, GridItem, Image, Cell } from 'vant';

import icons from "@/assets/img/home_info_icon.png";
import zixun_icon from "@/assets/img/zixun_icon.png";
import newsIcon from "@/assets/img/news.png";
import authurIcon from "@/assets/img/authur.png";
import pageTitle from '@/components/title/Title.vue';
export default {
  components: {
    [Icon.name]: Icon, [NavBar.name]: NavBar, pageTitle,
    [Tabbar.name]: Tabbar, [Search.name]: Search,
    [Swipe.name]: Swipe, [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid, [GridItem.name]: GridItem,
    [Image.name]: Image, [Cell.name]: Cell
  },
  data() {
    return {
      value: '',
      icons: icons,
      zixun_icon: zixun_icon,
      newsIcon: newsIcon,
      authurIcon: authurIcon,
      banner: [],
      topNav: [],
      newCourse: [],
      list: [],
      keyword:'',
      curriculumUpdate: [],
      baseUrl: this.$API.ASSET_IMAGES_URL,
    };
  },
  mounted() {
    this.initAjaxMethod();
  },
  methods: {
    onSearch() {
      if(this.keyword){
        this.$router.push('/listSearch?keyword='+this.keyword)
      }
    },
    moreMethod(flag) {
      console.log(flag);
      this.$router.push('/curriculum')
    },
    initAjaxMethod() {
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.GET_HOME_INDEX, { leixing: 1 })
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            this.banner = Array.isArray(res.banner) ? res.banner : [];
            this.topNav = Array.isArray(res.topNav) ? res.topNav : [];
            this.newCourse = Array.isArray(res.newCourse) ? res.newCourse : [];
            this.curriculumUpdate = Array.isArray(res.curriculumUpdate) ? res.curriculumUpdate : [];
            this.list = Array.isArray(res.list) ? res.list : [];
          } else {
            this.$notify({ type: 'warning', message: res.msg });
          }
        });
    },
    // goToDetail(data) {
    //   this.$router.push({path:'/curriculumDetail',query:{id:data.id}});
    // },

    goToDetail(data,flag=1) {

      let parme=flag==1?{course_id:data.id}:{ course_id: data.kcid,kb_id:data.id};
      const toast=this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.GET_CURRICULUM_DETECTION,parme)
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            // if(res.link_url){
            //     this.$store.dispatch('app/setCurriculumLink', res.link_url);
            //     this.$router.push({path:'/curriculumLink'});
            //     return;
            // }
            // if(res.data == 1){
            //   if(res.link_url){
            //     this.$router.push({path:'/curriculumLink',query:{course_id:res.course_id,kb_id:res.kb_id}})
            //   }else{
            //     this.$router.push({path:'/couPlayback',query:{course_id:res.course_id,kb_id:res.kb_id}})
            //   }
            // }else{
            //   this.$router.push({path:'/curriculumDetail',query:{id:res.course_id}})
            // }
        
              this.$router.push({path:'/curriculumDetail',query:{id:res.course_id,isPlay:(res.data == 1?1:0)}})
            
          
          } else {
            this.$notify({ type: 'warning', message: res.msg });
          }
        });
      },
      bannerGoto(item){
        this.$router.push({path:item.link})
      },

    // 课程更新跳转
    goToDetailkcgx(data,flag=1) {

        let parme=flag==1?{course_id:data.id}:{ course_id: data.kcid,kb_id:data.id};


        if(data.lnubtype=="needpay"){
          //curriculumDetail
          this.$router.push({path:'/curriculumDetail',query:{id:data.kcid,isPlay:1}})
        }else{

            if(data.lnubtype=="lizhi"){
            // 跳转到荔枝
            window.location.href=data.lnub;
          } else{
            this.$router.push({path:'/couPlayback',query:{course_id:data.kcid,kb_id:data.id,isPlay:0}})
          }
        }
        
        // if(res.link_url){
           

        // this.$router.push({path:'/couPlayback',query:{course_id:res.course_id,kb_id:data.id,isPlay:(res.data == 1?1:0)}})
        // }else{
        // this.$router.push({path:'/curriculumDetail',query:{id:res.course_id,isPlay:(res.data == 1?1:0)}})
        // }

      
      },

  }
};
</script>

<style lang="less">
.home-container {
  .search-group {
    display: flex;
    align-items: center;
    background: #000;
    .search-logo{
      height: 0.5rem;
    }
    .van-search {
      padding:0 0 0 0.2rem;
      flex:1;
      .van-cell {
        font-size: 0.24rem;
        line-height: 0.3rem;
      }
      .van-field__left-icon .van-icon {
        font-size: 0.3rem;
      }
    }
    .search-button {
      font-size: 0.3rem;
      padding: 0.1rem 0.04rem 0 0.04rem;
      color: #333;
    }
  }
  .swipe-group {
    // padding:0 0.3rem;
    // .van-swipe{
    //   border-radius: 5px;
    //   overflow: hidden;
    // }
    .van-swipe-item {
      height: 3.6rem;
    }
    .swipe-img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  .nav-group {
    margin-top: 0.12rem;
    .nav-img-text {
      font-size: 0.3rem;
      color: #888;
    }
  }
  .home-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem;
    background: #fff;
    .home-title-left {
      display: flex;
      align-items: center;
    }
    .home-title-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .home-title-text {
      font-size: 0.3rem;
      color: #666;
      margin-left: 0.1rem;
    }
    .home-title-more {
      font-size: 0.28rem;
      color: #666;
      margin-right: 0.04rem;
    }
  }
  .class-upload-group {
    background: #fff;
    .van-cell {
      padding: 0.1rem 0.1rem;
    }
    .class-upload-title {
      font-size: 0.3rem;
      color: #666;
      padding-left: 0.1rem;
    }
  }
  .list-grid-group {
    padding: 0.1rem;
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    .match-grid-content {
      width: 48%;
      margin: 2% 2% 0% 0%;
      padding: 1.5%;
      border: 1px solid #eee;

      // width: 50%;
      // padding: 0.1rem;
    }
    .match-grid-box {

   
      // border-radius: 0.2rem 0.2rem 0 0;
      background: #fff;
      // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    }
    .content-grid-img-group {
      width: 100%;
      height: 1.8rem;
      background: #fff;
      overflow: hidden;
      // border-radius: 0.2rem 0.2rem 0 0;
      .content-grid-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .detail-grid-mobile {
      padding: 0.2rem 0.1rem;
    }
    .detail-grid-title {
      font-size: 0.3rem;
      color: #333;
      line-height: 0.4rem;
    }
    .detail-grid-infos {
      padding-top: 0.16rem;
      font-size: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .detail-info-grid-price {
        // font-size: 0.24rem;
        color: #3e3a39;
        em {
          font-size: 0.28rem;
          margin-right: 3px;
          padding: 0 0.06rem;
          color: #E4A357;
          font-style: normal;
        }
      }
      .detail-info-grid-text {
        font-size: 0.22rem;
        color: #3e3a39;
        padding: 0.08rem 0.2rem;
        background: #ff6857;
        color: #fff;
        border-radius: 0.3rem;
      }
    }
  }
  .list-group {
    height: 100%;
    // padding: 0 0.2rem;
  }
  .match-content {
    padding: 0.2rem;
    color: #3e3a39;
    display: flex;
    // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    // margin-top: 0.2rem;
    cursor: pointer;
    // border-radius: 0.2rem;
    border-bottom: 1px solid #eee;
    background: #fff;
    .content-img-group-mobile {
      position: relative;
      align-items: center;
      justify-content: center;

      .content-img-group {
        width: 2.8rem;
        height: 1.8rem;
        background: #fff;

        .content-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .detail-mobile {
      flex: 1;
      padding-left: 0.2rem;
    }
    .detail-title {
      font-weight: 600;
      font-size: 0.3rem;

      color: #666;
      line-height: 0.4rem;
    }

    .detail-info {
      display: flex;
      align-items: center;
      padding-top: 0.16rem;
    }

    .detail-infos {
      padding-top: 0.16rem;
      // font-size: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .detail-info-price {
        font-size: 0;
       
        color: #3e3a39;
        em {
          font-size: 0.28rem;
          margin-right: 0.06rem;
          font-style: normal;
          padding: 0 0.06rem;
          color: #E4A357;
        }
      }
      .detail-info-text {
        font-size: 0.24rem;
        color: #3e3a39;
        padding: 0.08rem 0.2rem;
        background: #ff6857;
        color: #fff;
        border-radius: 0.3rem;
      }
    }
  }
}
</style>
